<template>
    <div class="menu page">
        <div class="search-container">
            <el-form :inline="true" :model="searchForms" class="demo-form-inline">
                <el-form-item label="菜单名称">
                    <el-input v-model="searchForms.menu_name" :prefix-icon="Menu" placeholder="请输入菜单名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-container">
            <div class="table-content">
                <el-table 
                :data="tableData" 
                height="100%"
                row-key="menu_id"
                border>
                    <el-table-column type="index" label="序号" width="70" />
                    <el-table-column prop="menu_name" label="菜单名称"/>
                    <el-table-column prop="menu_type" label="菜单类别">
                        <template #default="scope">
                            <el-tag
                                :type="scope.row.menu_type === 'M' ? 'primary' : 'success'"
                                >{{ scope.row.menu_type === 'M' ? '目录' : '菜单' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="order_num" label="排序" />
                    <el-table-column prop="icon" label="图标" />
                    <el-table-column prop="perms" label="权限标识" />
                    <el-table-column prop="url" label="路由" />
                    <el-table-column prop="create_time" label="创建时间" />
                </el-table>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
//引入elementPlus图标
import { Search, Menu } from '@element-plus/icons-vue';
//引入菜单API接口
import { getMenus } from '@/api/apis/menu.ts';
//引入工具方法
import { recursionTrees } from '@/utils/tools.ts';
interface Menu {
    menu_id: number //菜单id
    menu_name: string //菜单名称
    menu_type: string //菜单类别
    order_num: number //排序
    icon: string //图标
    perms: string //权限标识
    url: string //组件路径
    create_time: string //创建时间
    children?: Menu[]
}
interface SearchForm {
    menu_name: string
}
//定义表格数据
let tableData = ref<Menu[]>([]);
//搜索表单
const searchForms = reactive<SearchForm>({
    menu_name: ''
})
//定义分页数据
//查询用户列表
const searchMenus = () => {
    tableData.value = [];
    getMenus({}).then((res:any) => {
        if(res && res.code === 200) {
            tableData.value = recursionTrees(res.data, 'menu_id','parent_id', 0);
        }
    });
}

//搜索提交
const handleSearch = () => {
    searchMenus();
}

onMounted(() => {
    searchMenus();
});

</script>
<style lang="scss" scoped>
.menu {
    width: 100%;
}
</style>